import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pp_uikit/bottom_sheet/pp_action_sheet_theme.dart';
import 'package:pp_uikit/pp_uikit.dart';
import 'package:pp_uikit/tabbar/pp_tabbar_controller.dart';
import 'package:pp_uikit_demo/demo/demo_image_selector.dart';
import 'package:pp_uikit_demo/demo/group_demo_page.dart';

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyContentPage(),
    );
  }
}

// ignore: must_be_immutable
class MyContentPage extends StatelessWidget {
  MyContentPage({Key? key}) : super(key: key);

  final _switchValue = true.obs;
  final _tabbarController = PPTabbarController();
  final _multiListViewController = PPMultiListViewController();

  final _tabs = <PPTabBarItem>[
    PPTabBarItem(text: "在售中", badgeText: "61"),
    PPTabBarItem(text: "下架", badgeText: "61"),
    PPTabBarItem(text: "发布"),
    PPTabBarItem(text: "草稿", badgeText: "10"),
  ].obs;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("DemoPage"),
      ),
      body: ListView(
        children: [
          PPGroup(
            title: "PPSearchBar",
            children: [
              PPGroupTitle(
                title: "可以操作",
                isShowRightIcon: false,
                isTextAlignRight: false,
              ),
              PPSearchBar(
                marginRight: 8,
              ),
              PPGroupTitle(
                title: "不可以操作",
                isShowRightIcon: false,
                isTextAlignRight: false,
              ),
              PPSearchBar(
                hint: "我不能输入，但是能点击",
                showButton: false,
                enable: false,
                textFieldClickCallback: () {
                  PPToast.show(">_<");
                },
              ),
            ],
          ),
          PPGroup(
            title: "各个组件",
            children: [
              PPGroupTitle(
                title: "文本",
                onTap: () {
                  // Get.toNamed(Routes.widgetsText);
                },
              ),
              PPGroupTitle(
                title: "PPCard & PPLine",
                onTap: () {
                  // Get.toNamed(Routes.widgetsCard);
                },
              ),
              PPGroupTitle(
                title: "分组表单",
                onTap: () {
                  // Get.toNamed(Routes.widgetsForm);
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return const GroupDemoPage();
                    }),
                  );
                },
              ),
              PPGroupTitle(
                title: "PPButton",
                onTap: () {
                  // Get.toNamed(Routes.widgetsButton);
                },
              ),
              PPGroupTitle(
                title: "PPRefresh",
                onTap: () {
                  // Get.toNamed(Routes.widgetsRefresh);
                },
              ),
              PPGroupTitle(
                title: "PPToast",
                isShowRightIcon: false,
                onTap: () {
                  PPToast.show("I am PPToast");
                },
              ),
              PPGroupTitle(
                title: "PPHud",
                isShowRightIcon: false,
                onTap: _showHud,
              ),
              PPGroupTitle(
                title: "多列表联动",
                isShowRightIcon: false,
                onTap: () {
                  _showPPMultiListView(context);
                },
              ),
              PPGroupTitle(
                title: "ImageSelector",
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return DemoImageSelector();
                    }),
                  );
                },
              ),
            ],
          ),
          PPGroup(
            title: "消息弹窗",
            children: [
              PPGroupTitle(
                title: "一个按钮",
                onTap: () {
                  PPDialog.show(
                    context,
                    title: "我是Title",
                    message: "我是messsage",
                    confirm: "我知道了",
                    cancel: null,
                    autoCloseWhenButtonClick: false,
                    onConfirm: () {
                      PPToast.show("onConfirm");
                      Navigator.pop(context);
                    },
                  );
                },
              ),
              PPGroupTitle(
                title: "两个按钮",
                onTap: () {
                  PPDialog.show(
                    context,
                    title: "确认退出吗？",
                    message: "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
                    onCancel: () {
                      PPToast.show("onCancel");
                    },
                    onConfirm: () {
                      PPToast.show("onConfirm");
                    },
                  );
                },
              ),
              PPGroupTitle(
                title: "多个按钮",
                onTap: () {
                  PPDialog.show(
                    context,
                    title: "多个按钮",
                    message: "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
                    buttonList: ["1", "2", "3"],
                    actionsCallback: (index) {
                      PPToast.show("点击了 $index 按钮");
                    },
                  );
                },
              ),
              PPGroupTitle(
                title: "自定义",
                onTap: () {
                  PPDialog.show(
                    context,
                    title: "自定义",
                    isDismissible: false,
                    autoCloseWhenButtonClick: false,
                    contentWidget: Container(
                      margin:
                          const EdgeInsets.only(top: 12, left: 12, right: 12),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          const Text(
                            "商品库存",
                            // style: TextStyle(
                            //   color: PPColors.color6,
                            // ),
                          ),
                          const SizedBox(height: 32),
                          Expanded(
                            child: Container(
                              height: 32,
                              margin:
                                  const EdgeInsets.only(left: 12, right: 12),
                              child: TextField(
                                keyboardType: TextInputType.number,
                                inputFormatters: [
                                  PPTextInputFormatter.digitsOnly
                                ],
                                // enabled: widget.enable,
                                // autofocus: widget.autoFocus,
                                // focusNode: _focusNode,
                                maxLength: 5,
                                // 控制器属性，控制正在编辑的文本。
                                // controller: _controller,
                                // 光标颜色属性，绘制光标时使用的颜色。
                                cursorColor:
                                    PPDefaultTheme.instance.brandPrimary,
                                // 光标宽度属性，光标的厚度，默认是2.0。
                                cursorWidth: 2.0,
                                // 样式属性，用于正在编辑的文本的样式。
                                style: TextStyle(
                                  textBaseline: TextBaseline.alphabetic,
                                  color: PPDefaultTheme.instance.colorTextBase,
                                  fontSize: 16,
                                ),
                                // 装饰（`decoration`）属性，在文本字段周围显示的装饰。
                                decoration: InputDecoration(
                                  counterText: '',
                                  enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(4.0),
                                    borderSide: const BorderSide(
                                        color: PPDefaultTheme.borderColor),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: const BorderSide(
                                        color: PPDefaultTheme
                                            .borderColor), // 聚焦时边框颜色
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  // contentPadding: const EdgeInsets.only(right: 6),
                                  // 填充颜色属性，填充装饰容器的颜色。
                                  fillColor: Colors.transparent,
                                  // 是密集属性，输入子项是否是密集形式的一部分（即使用较少的垂直空间）。
                                  isDense: true,
                                  // 填充属性，如果为`true`，则装饰的容器将填充fillColor颜色。
                                  filled: true,
                                  // 提示样式属性，用于提示文本（`hintText`）的样式。
                                  hintStyle: const TextStyle(
                                    fontSize: 14,
                                    height: 1,
                                    textBaseline: TextBaseline.alphabetic,
                                    color: Color(0xFF999999),
                                  ),
                                  // 提示文本属性，提示字段接受哪种输入的文本。
                                  hintText: "请输入",
                                ),
                                // 在改变属性，当正在编辑的文本发生更改时调用。
                                onChanged: (content) {},
                                onSubmitted: (content) {},
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    onCancel: () {
                      Navigator.pop(context);
                    },
                    onConfirm: () {
                      Navigator.pop(context);
                    },
                  );
                },
              ),
              PPGroupTitle(
                title: "底部自定义弹框",
                onTap: () {
                  PPDialog.showCustomSheet(
                    context,
                    widget: Container(
                      color: Colors.yellow,
                      child: const Center(
                        child: Text("自定义弹框"),
                      ),
                    ),
                  );
                },
              ),
              PPGroupTitle(
                title: "底部单选弹框",
                onTap: () {
                  List<PPCommonActionSheetItem> actions = [];
                  actions.add(PPCommonActionSheetItem(
                    '选项一（选中）',
                    actionStyle: PPCommonActionSheetItemStyle.selected,
                  ));
                  actions.add(PPCommonActionSheetItem('选项二'));
                  actions.add(PPCommonActionSheetItem('选项三'));
                  PPBottomSheet.show(
                    context,
                    title: "我是title",
                    actions: actions,
                    onItemClick: (index, actionItem) {
                      debugPrint("index = $index");
                    },
                  );
                },
              ),
              PPGroupTitle(
                title: "底部单选弹框-图片",
                onTap: () {
                  List<PPCommonActionSheetItem> actions = [];
                  actions.add(PPCommonActionSheetItem(
                    '选项一（选中）',
                    actionStyle: PPCommonActionSheetItemStyle.selected,
                    image: "images/icon_upload_video.png",
                  ));
                  actions.add(PPCommonActionSheetItem(
                    '选项二',
                    image: "images/icon_take_photo.png",
                  ));
                  PPBottomSheet.showImageStyle(
                    context,
                    actions: actions,
                    themeData:
                        PPActionSheetTheme(imageSize: const Size(40, 40)),
                    onItemClick: (index, actionItem) {
                      debugPrint("index = $index");
                    },
                  );
                },
              ),
              PPGroupTitle(
                title: "单选弹框",
                onTap: () {
                  List<String> list = ["选项1", "选项2", "选项3", "选项4", "选项5"];
                  PPDialog.showSingleSelectSheet(context,
                      title: "单选",
                      items: list,
                      selectedIndex: 0, onConfirm: (i) {
                    PPToast.show(i.toString());
                  });
                },
              ),
              PPGroupTitle(
                title: "多选弹框",
                onTap: () {
                  List<String> list = ["选项1", "选项2", "选项3", "选项4", "选项5"];
                  PPDialog.showMultiSelectSheet(context,
                      title: "多选弹窗", items: list, confirmFun: (list) {
                    PPToast.show(list.toString());
                  });
                },
              ),
              PPGroupTitle(
                title: "图片选择器",
                onTap: () {
                  PPAssetPicker.show(
                    context,
                    maxAssets: 1,
                    allowCapture: false,
                  );
                },
              ),
              PPGroupTitle(
                title: "日期选择器",
                onTap: () {
                  PPDatePicker.show(
                    context,
                    themeColor: Colors.green,
                    onConfirm: (dateTime, list) {
                      PPToast.show("onConfirm:  $dateTime   $list");
                    },
                    onClose: () {
                      debugPrint("onClose");
                    },
                    onCancel: () {
                      debugPrint("onCancel");
                    },
                    onChange: (dateTime, list) {
                      debugPrint("onChange:  $dateTime    $list");
                    },
                  );
                },
              ),
              PPGroupTitle(
                title: "时间选择器",
                onTap: () {
                  PPTimePicker.show(
                    context,
                    themeColor: Colors.blue,
                    onConfirm: (dateTime, list) {
                      PPToast.show("onConfirm:  $dateTime   $list");
                    },
                    onClose: () {
                      debugPrint("onClose");
                    },
                    onCancel: () {
                      debugPrint("onCancel");
                    },
                    onChange: (dateTime, list) {
                      debugPrint("onChange:  $dateTime    $list");
                    },
                  );
                },
              ),
            ],
          ),
          PPGroup(
            title: "PPTabBar",
            children: [
              SizedBox(
                width: double.infinity,
                child: PPTabBar(
                  tabs: _tabs,
                  mode: PPTabBarBadgeMode.origin,
                  tabbarController: _tabbarController,
                  onTap: (state, index) {
                    //
                  },
                ),
              ),
              SizedBox(
                width: double.infinity,
                child: PPTabBar(
                  tabs: _tabs,
                  tabbarController: _tabbarController,
                  mode: PPTabBarBadgeMode.average,
                  indicatorColor: Colors.red,
                  labelColor: Colors.blue,
                  badgeColor: Colors.green,
                  onTap: (state, index) {
                    //
                  },
                ),
              ),
              PPButton(
                "badge +1",
                textColor: Colors.white,
                bgColor: PPDefaultTheme.instance.brandPrimary,
                onPressed: () {
                  for (var element in _tabs) {
                    var text = element.badgeText;
                    if (text != null) {
                      var num = int.parse(text);
                      num += 1;
                      element.badgeText = "$num";
                    } else {
                      element.badgeText = "1";
                    }
                  }
                  _tabbarController.refreshBadge();
                },
              ),
            ],
          ),
          PPGroup(
            title: "PPTextField",
            children: [
              Container(
                color: Colors.blue.withOpacity(0.1),
                height: 60,
                child: PPTextField(
                  borderRadius: 8,
                ),
              ),
              Container(
                height: 60,
                color: Colors.yellow.withOpacity(0.1),
                child: PPTextField(backgroundColor: Colors.red),
              ),
            ],
          ),
          PPGroup(
            children: [
              PPSteper(
                  // height: 34,
                  ),
              PPSteper(
                height: 34,
              ),
              const SizedBox(height: 12),
              PPGroupCustom(
                child: SizedBox(
                  // height: 80,
                  child: PPSteper(
                    style: PPSteperStyle.leftInput,
                  ),
                ),
              ),
              Container(
                  color: Colors.white,
                  child: Obx(() => PPSwitch(
                        value: _switchValue.value,
                        width: 59,
                        height: 28,
                        onChanged: (bool value) {
                          _switchValue.value = value;
                        },
                      ))),
              PPBanner(
                itemCount: 5,
                indicator: CircleBannerIndicator(),
                itemBuilder: (context, index) {
                  return Image.network(
                    "http://via.placeholder.com/350x15$index",
                    fit: BoxFit.fill,
                  );
                },
                onItemTap: (index) {
                  debugPrint("PPBanner onItemTap index = $index");
                },
              ),
            ],
          ),
          PPGroup(
            title: "PPRatingStar",
            children: [
              PPGroupCustom(
                child: const Center(child: PPRatingStar()),
              ),
              PPGroupCustom(
                child: const Center(
                  child: PPRatingStar(
                    selectedCount: 0.5,
                  ),
                ),
              ),
              PPGroupCustom(
                child: const Center(
                  child: PPRatingStar(
                    selectedCount: 3.1,
                  ),
                ),
              ),
              PPGroupCustom(
                child: const Center(
                  child: PPRatingStar(
                    selectedCount: 3.6,
                    count: 10,
                  ),
                ),
              ),
              PPGroupCustom(
                child: Center(
                  child: PPRatingStar(
                    selectedCount: 3,
                    space: 1,
                    canRatingZero: true,
                    onSelected: (count) {
                      PPToast.show("选中了$count个");
                    },
                    starBuilder: _buildRating,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 50),
        ],
      ),
    );
  }

  void _showHud() async {
    PPHud.show();
    await Future.delayed(const Duration(seconds: 2));
    PPHud.hide();
  }

  void _showPPMultiListView(BuildContext context) {
    PPDialog.showCustomSheet(
      context,
      widget: Column(
        children: [
          PPButton(
            "Change Data",
            textColor: Colors.white,
            bgColor: PPDefaultTheme.instance.brandPrimary,
            onPressed: () {
              // 测试数据变化
              var children = goodsCategory.children;
              children.removeLast();
              goodsCategory.children = children;
              for (var element in goodsCategory.children) {
                element.isSelected = false;
                for (var sub in element.children) {
                  sub.isSelected = false;
                  for (var ssub in sub.children) {
                    ssub.isSelected = false;
                  }
                }
              }
              // 设置默认选中item
              var first = goodsCategory.children.first;
              first.isSelected = true;
              first.children.first.isSelected = true;
              _multiListViewController.refreshData();
            },
          ),
          const SizedBox(
            height: 12,
          ),
          PPMultiListView(
            entity: goodsCategory,
            controller: _multiListViewController,
            themeData: PPSelectionTheme(
                brandPrimary: PPDefaultTheme.instance.brandPrimary),
            onSelectionConfirm: (entity, firstIndex, secondIndex, thirdIndex) {
              PPToast.show(
                  "[$firstIndex, $secondIndex, $thirdIndex]  title=${entity.title}");
            },
          ),
        ],
      ),
    );
  }

  // 自定义图片，大小，颜色
  Widget _buildRating(RatingState state) {
    switch (state) {
      case RatingState.select:
        return Image.asset(
          "images/icon_star.png",
          width: 26,
          height: 26,
          color: PPDefaultTheme.instance.brandPrimary,
        );
      case RatingState.half:
        return Image.asset(
          "images/icon_star_half.png",
          width: 26,
          height: 26,
        );
      case RatingState.unselect:
      default:
        return Image.asset(
          "images/icon_star.png",
          width: 26,
          height: 26,
          color: PPDefaultTheme.instance.backgroundColor,
        );
    }
  }

  var goodsCategory = PPSelectionEntity(
    children: [
      PPSelectionEntity(
        title: "1",
        children: [
          PPSelectionEntity(title: "1-1"),
          PPSelectionEntity(title: "1-2"),
        ],
      ),
      PPSelectionEntity(
        title: "2",
        isSelected: true,
        children: [
          PPSelectionEntity(
            title: "2-1",
            value: "2-1",
            children: [
              PPSelectionEntity(title: "2-1-1"),
              PPSelectionEntity(title: "2-1-2"),
            ],
          ),
          PPSelectionEntity(
            title: "2-2",
            value: "2-2",
            isSelected: true,
            children: [
              PPSelectionEntity(
                title: "2-2-1",
                isSelected: true,
              ),
              PPSelectionEntity(title: "2-2-2"),
            ],
          ),
          PPSelectionEntity(
            title: "2-3",
            value: "2-3",
            children: [
              PPSelectionEntity(title: "2-3-1"),
              PPSelectionEntity(title: "2-3-2"),
            ],
          ),
        ],
      ),
    ],
  );
}
